<template>
	<my-page :is-tabbar="true" :tab-key="3" title="瑞安国企资产小程序—瑞安国企资产e租" :is-back="false">
		<view class="bg-container">
			<image class="bg-image" src="/static/images/mine_bg.png" mode="widthFix"></image>
		</view>
		
		<!-- 功能列表 -->
		<view class="function-list">
				<!-- 用户信息卡片 -->
			<view class="user-card" @click="handleLogin">
				<view class="avatar-container">
					<image class="avatar" src="/static/images/profile.png" mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<view v-if="phumber && user.nickName" class="user-name">{{ user.nickName }}({{phumber}})</view>
					<view v-else class="user-name">请点击登录</view>
				</view>
			</view>
			<view v-if="phumber && user.nickName">
				<!-- 收藏记录 -->
				<view class="function-item" @click="goToCollections">
					<view class="function-icon">
						<text class="iconfont icon-star" style="color: #2979ff;"></text>
					</view>
					<view class="function-content">
						<text class="function-title">收藏记录</text>
					</view>
					<view class="function-arrow">
						<text class="iconfont icon-arrow-right-bold"></text>
					</view>
				</view>
				
				<!-- 浏览记录 -->
				<view class="function-item" @click="goToBrowsingHistory">
					<view class="function-icon">
						<text class="iconfont icon-time" style="color: #ff9800;"></text>
					</view>
					<view class="function-content">
						<text class="function-title">浏览记录</text>
					</view>
					<view class="function-arrow">
						<text class="iconfont icon-arrow-right-bold"></text>
					</view>
				</view>
				
				<!-- 联系记录 -->
				<view class="function-item" @click="goToContactHistory">
					<view class="function-icon">
						<text class="iconfont icon-tel" style="color: #2979ff;"></text>
					</view>
					<view class="function-content">
						<text class="function-title">联系记录</text>
					</view>
					<view class="function-arrow">
						<text class="iconfont icon-arrow-right-bold"></text>
					</view>
				</view>
			</view>
		</view>
		<MyLogin ref="loginRef"/>
	</my-page>
</template>

<script setup>
import MyLogin from '@/components/MyLogin.vue'
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import MyPage from '@/components/MyPage.vue'
const loginRef = ref()
const store = useStore()
const phumber = computed(() => {
	return store.state.user.phoneNumber
})
const user = computed(() => {
	return store.state.user.user
})
function handleLogin() {
	if (!phumber.value) {
		loginRef.value.open()
	} else if (!user.userName){
		store.dispatch('user/login')
		.then(res => {
			uni.showToast({
				title: '登录成功'
			})
			store.dispatch('user/getUserInfo')
		})
		.catch((res) => {
			debugger
			if (res === '登录') {
				loginRef.value.open()
			} else {
				uni.showToast({
					title: '登录成功'
				})
			}
		})
	}
}
// 跳转到收藏记录
const goToCollections = () => {
	uni.navigateTo({
		url: '/pages/collection/index'
	})
}

// 跳转到浏览记录
const goToBrowsingHistory = () => {
	console.log('/pages/mine/history')
	uni.navigateTo({
		url: '/pages/mine/history'
	})
}

// 跳转到联系记录
const goToContactHistory = () => {
	uni.navigateTo({
		url: '/pages/contact-history/index'
	})
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/index.scss';

::v-deep .my_page {
	.my_header {
		background: linear-gradient(to right, #2979ff, #1565C0);
		.wrap {
			background: linear-gradient(to right, #2979ff, #1565C0);
		}
	}
}
.bg-container {
	position: relative;
	background: linear-gradient(to right, #2979ff, #1565C0);
	padding: 40rpx 30rpx 60rpx;
	height: 160rpx;
	.bg-image {
		position: absolute;
		z-index: 1;
		width: 260rpx;
		right: 50rpx;
		top: 80rpx;
	}
}



// 功能列表
.function-list {
	background: #fff;
	border-radius: 40rpx;
	margin: -40rpx 0 0 0;
	padding: 150rpx 0;
	position: relative;
	z-index: 1;
	min-height: 50vh;
	// 用户卡片
	.user-card {
		position: absolute;
		color: rgba(51, 51, 51, 1);
		display: flex;
		flex-direction: column;
		top: -60rpx;
		left: 60rpx;
		.avatar-container {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 4rpx solid rgba(255, 255, 255, 0.8);
			margin-bottom: 10rpx;
			
			.avatar {
				width: 100%;
				height: 100%;
			}
		}
		
		.user-info {
			text-align: center;
			
			.user-name {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.function-item {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;
		margin: 0 30rpx 40rpx 30rpx;
		background: rgba(244, 245, 249, 1);
		border-radius: 10rpx;
		&:last-child {
			border-bottom: none;
		}
		
		.function-icon {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.iconfont {
				font-size: 48rpx;
			}
		}
		
		.function-content {
			flex: 1;
			margin-left: 20rpx;
			
			.function-title {
				font-size: 32rpx;
				color: rgba(0, 36, 87, 1);
			}
		}
		
		.function-arrow {
			color: #999;
			
			.iconfont {
				font-size: 36rpx;
			}
		}
	}
}
</style>